<template>
  <div>
    <div class="box">
      <div class="circular circular1"></div>
      <div class="circular circular2"></div>
      <div class="circular circular3"></div>
      <div class="circular circular4"></div>
      <div class="wrap">
        <img src="../../assets/img/login.png" class="img1">
        <div class="con">
          <img src="../../assets/img/orange.png">
          <p>优 质 甄 选 · 高 枕 无 忧</p>
          <el-input v-model="user.username" placeholder="请输入账号" clearable class="inp"></el-input>
          <el-input v-model="user.password" placeholder="请输入密码" clearable show-password class="inp"></el-input>
          <el-button type="primary" @click="submit()">登&nbsp;&nbsp;录</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
 import {mapActions} from "vuex"
  import {manageLogin} from "../../request/api"
  import {successAlert,warningAlert} from "../../utils/alert"
  export default {
    data() {
      return {
        user:{
          username:"",
          password:""
        }
      }
    },
    methods: {
      ...mapActions({
        asyncUser:"asyncUser"
      }),
      // 点击了登录
      submit(){
        manageLogin(this.user).then(res=>{
          if(res.data.code == 200){
            // 成功的提示
            successAlert(res.data.msg)
            // 将用户信息存储到状态层
            this.asyncUser(res.data.list)
            // 跳转到首页
            this.$router.push("/")
          }else{
            // 失败的提示
            warningAlert(res.data.msg)
          }
        })
      }
    },
    components: {},
    mounted() {},
    destroyed() {},
  }
</script>
<style scoped lang="less">
  @import url("../../less/index.less");

  .box {
    width: 100vw;
    height: 100vh;
    background: linear-gradient(@color1, @color2);
    position: relative;
  }

  .wrap {
    position: absolute;
    right: 15%;
    top: 5vh;
  }

  .img1 {
    height: 90vh;
  }

  .con {
    width: 50%;
    position: absolute;
    right: 4%;
    top: 0;
  }

  .con img {
    width: 100%;
    margin-top: 25%;
  }

  .con p {
    margin-top: 7%;
    text-align: center;
    font-size: 26px;
    color: rgb(149, 149, 149);
    margin-bottom: 22%;
  }

  .con .inp {
    margin-bottom: 5%;
  }

  .con button {
    width: 100%;
    font-size: 20px;
    border-radius: 22px;
    margin-top: 3%;
  }

  .circular {
    border-radius: 50%;
    background: linear-gradient(rgba(255, 85, 51, 1), rgba(255, 85, 51, 0))
  }

  .circular1 {
    width: 200px;
    height: 200px;
    position: absolute;
    left: 10%;
    top: 50%;
  }
  .circular2 {
    width: 150px;
    height: 150px;
    position: absolute;
    left: 0;
    top: 30%;
    transform: translateX(-50%);
  }
  .circular3 {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 30%;
    top: 20%;
  }
  .circular4 {
    width: 170px;
    height: 170px;
    position: absolute;
    right: 0;
    top: 25%;
    transform: translateX(30%);
  }
</style>